{% extends "manage/stats_base.html" %}

{% block sub_content %}
<h4 id="help-info">
    点击<span class="glyphicon glyphicon-signal"></span>显示上课次数统计表格。当前显示机构<a href="#">无</a>，当前显示班级<a href="#">无</a>
    <a type="button" class="btn btn-default" href="javascript:;" onclick="location.href='{{ url_for('manage.export_statistics_classes_excel') }}'">导出Excel</a>
    <small></small> </h4>
<div class="row">
    <div class="col-md-10 col-md-offset-1" id="graph"></div>
</div>
<div class="col-md-12" class="row" style="margin-top:5px;">
  <div class="table-responsive">
    <table class="table table-bordered table-striped" data-toggle="table">
      <thead>
        <tr>
          <th data-sortable="true">班级序号</th>
          <th data-sortable="true">机构名称</th>
          <th data-sortable="true">班级名称</th>
          <th data-sortable="true">班级人数</th>
          <th data-sortable="true">最后一节课时间</th>
          <th data-sortable="true" data-sorter="studySorter">学习进度</th>
          <th>查看</th>
        </tr>
      </thead>
      <tbody>
        {% for row in rows if row.music_class.active %}
        <tr id="{{ row.music_class_id }}">
          <td>{{ loop.index }}</td>
          <td>{{ row.school_name }}</td>
          <td>{{ row.class_name}}</th>
          <td>{{ row.stu_num }}</td>
          <td>{{ row.recent }} {{ row.weekday }}</td>
          <td>{{ row.lesson }}</td>
          <td>
            <a href="{{ url_for('manage.class_session_list', class_id=row.music_class_id) }}"><span class="glyphicon glyphicon-time" title="查看时间轴"></span></a>
            <a class="show-graph" href="#"><span class="glyphicon glyphicon-signal" title="统计上课次数"></span></a>
          </td>
        </tr>
        {% endfor %}

      </tbody>
    </table>
  </div>
</div>
{% endblock %}

{% block js %}
<script>
function studySorter(a, b){
    var index1 = +a.split('.')[0];
    var index2 = +b.split('.')[0];
    if (index1 < index2) return 1;
    if (index1 > index2) return -1;
    return 0;
}

function showGraph(classId){
    var names = ['上课次数', '结课次数'];
    var groups = new vis.DataSet();
    groups.add({
        id: 0,
        content: names[0],
        options: {
            yAxisOrientation: 'left'
            // interpolation: {
            //     parametrization: 'uniform'
            // }
        }});
    groups.add({
        id: 1,
        content: names[1],
        options: {
            yAxisOrientation: 'left'
            // interpolation: {
            //     parametrization: 'uniform'
            // }
        }});

    var container = document.getElementById('graph');
    var dataset = new vis.DataSet();

    // get the chart data from server
    var url = "/manage/statistics/class_number/" + classId;
    $.get(url, function(data){
        var totalData = [];
        var finishData = [];
        data['data'].forEach(function(value, index, array){

            totalData.push({x: value.date, y: value.total, group: 0});
            finishData.push({x: value.date, y: value.finish, group: 1});

        });
        dataset.add(totalData);
        dataset.add(finishData);

        var options = {
            dataAxis: {
                visible: true, 
                showMinorLabels: true,
                left: {
                    title: {
                        text: '每日上课次数统计（每天4:00 am更新数据）'
                    }
                }
            },
            legend: true,
            start: data.from,
            end: data.to,
            clickToUse: true,
            drawPoints: { style: 'circle', size: 6},
            format: {
              majorLabels: {
                millisecond:'HH:mm:ss',
                second:     'MM/D HH:mm',
                minute:     'MM/D',
                hour:       'MM/D',
                weekday:    'MM YYYY',
                day:        'YYYY/MM/ddd',
                month:      'YYYY',
                year:       ''
              }
            }
        };
        $(container).html('');

        // show graph
        var graph2d = new vis.Graph2d(container, dataset, groups, options);
    }, 'json');

}

$(function(){
    // Warning: you must bind the click event to table rather than .show-graph
    // otherwise, after table sorting the td items in table will redraw and the
    // click event will be cleared.
    $('.table-responsive').on('click', '.show-graph', function(e){
        var classId = $(this).parent().parent().attr('id');
        showGraph(classId);
        // dynamic display the school name and classname
        var schoolName = $("#"+classId+" td:nth-child(2)").text();
        var className = $("#"+classId+" td:nth-child(3)").text();
        $("#help-info a:first").text(schoolName);
        $("#help-info a:last").text(className);
    });

});
</script>
{% endblock %}
